<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/css/bootstrap.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/cart.css">
    <script src="../lib/jquery/jQuery.js"></script>
    <script src="../lib/js/bootstrap.js"></script>
    <script src="../js/index.js"></script>
    <title>首页</title>
</head>

<body>
    <!-- 大屏状态下nav -->
    <div class="huge hidden-sm hidden-xs">
        <div id="topbar">
            <div class="container">
                <div class="l">
                    <p>在线时间08:30-21:30</p>
                    <p>欢迎访问家电在线商城</p>
                </div>
                <div class="r">
                    <a href="">登录</a>
                    <a href="">注册</a>
                    <a href="" class="cart"><i class="glyphicon glyphicon-shopping-cart"></i><span
                            class="badge">21</span>
                        <div class="shopcart">
                            <div class="blank"></div>
                            <div class="slt">
                                <div class="img"><img src="../media/g1.jpg" alt=""></div>
                                <div class="detail">
                                    <h5>X280笔记本电脑20KFA002CD</h5>
                                    <p>2 x 9999 ¥</p>
                                </div>
                                <span>X</span>
                            </div>
                            <div class="slt">
                                <div class="img"><img src="../media/g1.jpg" alt=""></div>
                                <div class="detail">
                                    <h5>X280笔记本电脑20KFA002CD</h5>
                                    <p>2 x 9999 ¥</p>
                                </div>
                                <span>X</span>
                            </div>
                            <div class="slt">
                                <div class="img"><img src="../media/g1.jpg" alt=""></div>
                                <div class="detail">
                                    <h5>X280笔记本电脑20KFA002CD</h5>
                                    <p>2 x 9999 ¥</p>
                                </div>
                                <span>X</span>
                            </div>
                            <h4>小计¥ 29999</h4>
                            <button class="look">查看购物车</button>
                            <button class="pay">结算</button>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <nav>
            <div class="container">
                <img src="../media/logo.png" alt="">
                <ul>
                    <li><a href="" class="active">首页</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">台式机</a></li>
                    <li><a href="">外设系列</a></li>
                    <li><a href="">评测中心</a></li>
                    <li><a href="">售后服务</a></li>
                </ul>
                <form action="">
                    <input type="text" placeholder="游戏笔记本">
                    <button type="submit">提交</button>
                </form>
            </div>
        </nav>
    </div>



    <!-- 小屏幕下nav -->
    <div class="lettle hidden-lg hidden-md">
        <div class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="btn"><i class="glyphicon glyphicon-align-justify"></i> </div>
                <div class="logo"><img src="../media/logo.png" alt="" width="110" class="img-responsive"></div>
                <div class="search"><i class="glyphicon glyphicon-search" data-toggle="modal" data-target="#search"></i>
                </div>
            </div>
            <!-- 左侧隐藏框 -->
            <div class="slideRight">
                <div class="s_head">
                    <!-- 未登录状态 -->
                    <!-- <a href="" class="login">登录</a>
                    <a href="" class="register">注册</a> -->
                    <!-- /未登陆状态 -->
                    <!-- 已登陆状态 -->
                    <a href="#" class="touxiang"><img src="../media/touxiang.jpg" width="50"
                            alt=""><span>欢迎渣渣灰欢迎渣渣灰欢迎渣渣灰</span> </a>
                    <a href="" class="has_cart"><i class="glyphicon glyphicon-shopping-cart"></i></a>
                    <!-- /已登陆状态 -->
                </div>
                <div class="s_logo"><img src="../media/logo.png" height="50" alt=""></div>
                <ul class="s_list">
                    <li><a href="">首页</a></li>
                    <li><a href="">我的购物车</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">台式机</a></li>
                    <li><a href="">外设系列</a></li>
                    <li><a href="">评测中心</a></li>
                    <li><a href="">售后服务</a></li>

                </ul>
            </div>
        </div>
    </div>
    <input type="hidden" name="" id="slider_num" value="2">

  
<div class="container">
    <div class="main">
        <div class="col-lg-8 col-md-8">
            <div class="main">
                <table class="table">
                  
                    <thead>
                        <tr>
                            <th style="text-align: left">商品</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>合计</th>
                            <th class="text-right">选择</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="goods"><i class="glyphicon glyphicon-remove-circle"></i><img src="../media/lap1.jpg" alt=""><span>拯救者
                                    Y7000 15.6英寸游戏笔记本 黑色 81FW0009CD</span></td>
                            <td>¥7999</td>
                            <td>
                                <div class="quantity"><input type="button" value="-">
                                    <input type="text" value="1">
                                    <input type="button" value="+"></div>
                            </td>
                            <td>¥7999</td>
                            <td>
                                <input type="checkbox" value="">
                            </td>
                        </tr>
                        <tr>
                            <td class="goods"><i class="glyphicon glyphicon-remove-circle"></i><img src="../media/lap1.jpg" alt=""><span>拯救者
                                    Y7000 15.6英寸游戏笔记本 黑色 81FW0009CD</span></td>
                            <td>¥7999</td>
                            <td>
                                <div class="quantity"><input type="button" value="-">
                                    <input type="text" value="1">
                                    <input type="button" value="+"></div>
                            </td>
                            <td>¥7999</td>
                            <td>
                                <input type="checkbox" value="">
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="tol">
                     
                    全选:<input type="checkbox" >
                </div>
               
            </div>
        </div>
        <div class="col-lg-4 col-md-4">
            <div class="pay">
                <h3>购物总计</h3>
                <h4>7999¥</h4>
                <button class="btn btn-primary btn-lg btn-block">提交订单</button>
            </div>
        </div>
    </div>
</div>
    
        <footer>
            <div class="top hidden-sm hidden-xs">
                <div class="container">
                    <dl>
                        <dd>三年免费保修</dd>
                        <dd>三年免费保修</dd>
                        <dd>三年免费保修</dd>
                        <dd>三年免费保修</dd>
                        <dd>三年免费保修</dd>
                    </dl>
                    <table class="table">
                           
                            <thead>
                              <tr>
                                <th>帮助中心</th>
                                <th>服务支持</th>
                                <th>关于我们</th>
                                <th>新闻资讯</th>
                                <th>线下门店</th>
                              </tr>
                            </thead>
                            <tbody>
                             <tr>
                                 <td><a href="#">购物指南</a></td>
                                 <td><a href="#">保修政策</a></td>
                                 <td><a href="#">公司介绍</a></td>
                                 <td><a href="#">营业执照</a></td>
                                 <td><a href="#">法律申明</a></td>
                             </tr>
                             <tr>
                                 <td><a href="#">支付方式</a></td>
                                 <td><a href="#">服务标准</a></td>
                                 <td><a href="#">加入我们</a></td>
                                 <td><a href="#">新闻动态</a></td>
                                 <td><a href="#">隐私政策</a></td>
                             </tr>
                             <tr>
                                 <td><a href="#">配送方式</a></td>
                                 <td><a href="#">退换货政策</a></td>
                                 <td><a href="#">联系我们</a></td>
                                 <td><a href="#">版权申明</a></td>
                                 <td><a href="#">服务条款</a></td>
                             </tr>
                             
                            </tbody>
                     </table>

                     <div class="contact">
                         <div class="wechat">
                             <p>微信公众号</p>
                             <img src="../media/wechat.jpg" alt="">
                         </div>
                         <div class="phone">
                             <h4>4006-999-999</h4>
                            <h6>周一至周日 8:00-18:00</h6>
                            <a href="#">24小时在线服务</a>
                         </div>
                     </div>
                </div>

            </div>
            <div class="bottom">
                <div class="container">
                    <p>版权所有2056-2086 数码家电在线商城模板  沪ICP备000000000号-0</p>
                </div>
            </div>
        </footer>



       





        <!-- 模态框（Modal） -->
        <div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            搜索
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-addon glyphicon glyphicon-search"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary">
                            提交更改
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <!-- /模态框 -->
</body>

</html>